import styled from '@emotion/styled';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { CloseOutlined } from '@ant-design/icons'

const noneIcon = require('../../assets/img/none.png');
const fuzzyIcon = require('../../assets/img/fuzzy.png');

import './styles/setting.less';



export interface IBackground {
	type: string; // 'none', // none | blur | custom | image
	isSelect: boolean;
	id: number;
	url: string;
	abbreviatedUrl: string;
	api?: string;
	apiClear?: string;
	fileName?: string;
	onSelect: Function;
	isDefault: boolean;
	watermark: boolean;
	deleteBackground: (id: number) => void
}

const Mask = styled.div`
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	color: #FFF;
	width: 0px;
    height: 0px;
	border-top: #252B48 30px solid;
    border-left: transparent 40px solid;

`;

const Close = styled(CloseOutlined)`
	position: absolute;
    color: #fff;
    right: 4px;
    top: -26px;
    font-size: 14px;
    font-weight: 700;
	-moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
      user-select:none;
`;

const BackGroundText = styled.p`
cursor: pointer;
display: flex;
align-items: center;
	margin: 0;
`;

const BackGroundNoneIcon = styled.span`
	width: 14px;
	height: 14px;
	margin: 0 4px;
	display: inline-block;
	background: url(' ${noneIcon}  ') no-repeat center;
	background-size: 100%;

`;
const BackGroundFuzzyIcon = styled.span`
	width: 14px;
	height: 14px;
	margin: 0 4px;
	display: inline-block;
	background: url(' ${fuzzyIcon}  ') no-repeat center;
	background-size: 140%;
`;

const ImageItem = (props: IBackground) => {
	const { t } = useTranslation();
	const dispatch = useDispatch();
	const { type, isSelect, url, onSelect, watermark, id, abbreviatedUrl, isDefault = true, deleteBackground } = props;

	const onClick = () => {
		onSelect(id);
	};

	const getClassName = () => {
		if (isSelect) {
			return type === 'fuzzy' ? 'image-box select blur' : 'image-box select';
		} else {
			return type === 'fuzzy' ? 'image-box blur' : 'image-box';
		}
	};

	const filterType = () => {
		if (watermark) {
			if (type == 'no') {
				return <BackGroundText >
					<BackGroundNoneIcon></BackGroundNoneIcon>
					<span>不使用视频水印</span>
				</BackGroundText>
			} else {
				return <img className="image" src={abbreviatedUrl} />
			}
		} else {
			if (type == 'no') {
				return <BackGroundText >
					<BackGroundNoneIcon></BackGroundNoneIcon>
					<span>不使用虚拟背景</span>
				</BackGroundText>
			} else if (type === 'fuzzy') {
				return <BackGroundText>
					<BackGroundFuzzyIcon></BackGroundFuzzyIcon>
					<span> 背景模糊</span >
				</BackGroundText>
			} else {
				return <img className="image" src={abbreviatedUrl} />
			}
		}

	};

	// 不添加水印
	return (
		<div className={getClassName()} style={{ padding: type === 'no' ? '0px 0px' : '', position: 'relative' }} onClick={onClick}>
			{!isDefault ? <Mask className='mask' onClick={(e) => {
				e.preventDefault();
				e.stopPropagation();
				deleteBackground(id)
			}}>
				<Close>X</Close>
			</Mask> : null
			}



			{
				filterType()
			}


		</div >
	);
};

export default ImageItem;
